<template>
  <div class="tabbar">
    <ul>
      <router-link to="/home" tag="li">
        <div>
          <i class="iconfont icon-home2" v-if="$route.path.includes('home')"></i>
          <i class="iconfont icon-home" v-else></i>
        </div>
        <span>首页</span>
      </router-link>
      <router-link to="/category" tag="li">
        <div>
          <i class="iconfont icon-fenleiorguangchangorqitatianchong" v-if="$route.path.includes('category')"></i>
          <i class="iconfont icon-fenleiorguangchangorqita" v-else></i>
        </div>
        <span>分类</span>
      </router-link>
      <router-link to="/find" tag="li">
        <div>
          <i class="iconfont icon-faxian1" v-if="$route.path.includes('find')" ></i>
          <i class="iconfont icon-faxian" v-else></i>
        </div>
        <span>发现</span>
      </router-link>
      <router-link to="/cart" tag="li">
        <div>
          <i class="iconfont icon-gouwuchefill" v-if="$route.path.includes('cart')"></i>
          <i class="iconfont icon-gouwuche" v-else></i>
        </div>
        <span>购物车</span>
      </router-link>
      <router-link to="/mine" tag="li">
        <div>
          <i class="iconfont icon-wodexiao" v-if="$route.path.includes('mine')"></i>
          <i class="iconfont icon-wode" v-else></i>
        </div>
        <span>我</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.tabbar {
    height: 4.9rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e3e8ee;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 4.9rem;
    ul{
        height: 100%;
        display: flex;
        justify-content:space-around;
        align-items: center;
        li{
            flex: 1;
            text-align: center;
            i{
                font-size: 2rem;
            }
        }
        .router-link-active{
            color: #f72126;
        }
    }
}
</style>